{%extends 'wgs/base.html'%}
{%block css%}

<style type="text/css">
    ul {
        bottom: 0;
        top: 0;
    }

    .main {
        margin-left: 200px;
        position: absolute;
        right: 0;
        left: 0;
    }

    .main #view1 {
        width: 100%;
    }

    .main>button {
        margin-left: 0px;
        margin-top: 10px;
    }

    .layui-layer-tips .layui-layer-content {
        background-color: transparent;
    }

    .layui-icon {
        margin-right: 15px;
        color: skyblue;
        font-size: 15px
    }
</style>

<script type="text/javascript">
    //为了保证不出现一闪而过的菜单栏, 放在了前面进行加载这段代码
    $().ready(() => {
        var a = $('.dynamic-navigation');
        localStorage.getItem('nav-status') == 1 ? (
            $('.dynamic-navigation').attr("tg", "1").css('left', '-200px'),
            $('.layui-layer-tips').css('left', '89px')
        ) : (
                console.log(localStorage.getItem('nav-status'))
            );

    });
</script>
{%endblock%}

{%block bodycontent%}

<div class="layui-row layui-col-space20">
    <div class="layui-col-xs12">
        <ul lay-shrink='all' class="layui-nav layui-nav-tree layui-nav-side dynamic-navigation" lay-filter="test"
            style="position: fixed;">
            <div style="text-align: center;">
                <a href='http://www.guomaigene.com/home' target='_blank'><img
                        style="width: 70%;height:5%;margin-bottom: 50px;margin-top: 50px;"
                        src="/static/img/logo.png" /></a>
            </div>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="{{ url('wgs:项目背景') }}" target="myFrame"><i class="layui-icon layui-icon-home"></i>项目背景</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url('wgs:结果概述',args=(username,project,analysis,))}}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>结果概述</a>
                    </dd>
                    <dd>
                        <a href="{{ url('wgs:样本信息',args=(username,project,analysis,))}}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>样本信息</a>
                    </dd>
                    <dd>
                        <a href="{{ url ('wgs:软件列表') }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>软件列表</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:测序数据质控') }}" target="myFrame"><i
                        class="layui-icon layui-icon-diamond"></i>测序数据质控</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:测序数据统计',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>测序数据统计</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:基因组比对') }}" target="myFrame"><i
                        class="layui-icon layui-icon-component"></i>基因组比对</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:比对信息统计',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>比对信息统计</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:祖源分析') }}" target="myFrame"><i
                    class="layui-icon layui-icon-flag"></i>祖源分析</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:祖源成分',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>祖源成分</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:短变异位点检测') }}" target="myFrame"><i
                        class="layui-icon layui-icon-table"></i>短变异位点检测</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:短变异位点统计',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>变异位点数据统计</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:SV变异检测') }}" target="myFrame"><i
                        class="layui-icon layui-icon-chart"></i>SV变异检测</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:SV变异统计',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>SV变异统计</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:CNV变异检测') }}" target="myFrame"><i
                        class="layui-icon layui-icon-chart-screen"></i>CNV变异检测</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:CNV变异统计',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>CNV变异统计</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:标记分布可视化') }}" target="myFrame"><i
                        class="layui-icon layui-icon-picture-fine"></i>标记分布可视化</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:标记位点染色体分布',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>标记位点染色体分布</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="{{ url ('wgs:基因功能注释') }}" target="myFrame"><i class="layui-icon layui-icon-list"></i>基因功能注释</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="{{ url ('wgs:denovo注释',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>denovo 基因组功能注释</a>
                    </dd>
                    <dd>
                        <a href="{{ url ('wgs:基因富集分析',args=(username,project,analysis,)) }}" target="myFrame"><i
                                class="layui-icon layui-icon-note"></i>基因富集分析</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <p style="margin-top:50%;text-align: center"><a href="https://github.com/N-damo"
                        target="_blank">Designed by Li'an Lin</a></p>
            </li>
        </ul>


        <div class="layui-fluid">
            <div class="main dynamic-navigation">
                <ul class="layui-nav layui-bg-blue">
                    <li class="layui-nav-item"><a href="/index/">主页</a></li>
                    <li class="layui-nav-item layui-this"><a href="/wgs/index/">我的结果</a></li>
                    <li class="layui-nav-item"><a href="/logout/">登出</a></li>
                    <li class="layui-nav-item "><a href="mailto:guomaigene@gmit.com">反馈</a></li>
                    <li class="layui-nav-item"><a href="/index/">当前在线：{{ request.session.user_name }}</a></li>
                </ul>
                <button class="layui-btn layui-btn-primary" id="left" title='收缩/展开'><i
                        class="layui-icon layui-icon-shrink-right" id="left_icon"></i></button>

                <div id="view1">

                    <div class="layui-row layui-col-space20">
                        <div id='content' class="layui-col-xs12 layui-col-lg12"
                            style='margin-top: -30px;margin-left:60px;'>
                            <iframe src="{{ url ('wgs:项目背景') }}" name="myFrame" croling="yes" frameborder="0"
                                width="90%" height="100%"></iframe>
                        </div>
                        <div class="layui-col-xs12 layui-col-lg12"
                            style="background-color: #2F4056;color: white;font-size: 15px;">
                            <div class="layui-container" style='margin-left: 50%;margin-right: 40%;'>国脉生物科技有限公司</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{%endblock%}
{%block js%}
<script>
    var $ = layui.jquery;
    var h = $(window).height();
    $('#content').height(h);
</script>

<script>
    var form = layui.form, $ = layui.jquery;
    form.render();
    $('#left').click(function () {
        $(this).children(".layui-icon").toggleClass("layui-icon-spread-left");
        $(this).children(".layui-icon").toggleClass("layui-icon-shrink-right");

    })
</script>
<script type="text/javascript">
    layui.use(['element', 'layer'], () => {
        var element = layui.element, $ = layui.jquery;
        element.init();
        $('body').on('click', '.main>button', () => {

            var a = $('.dynamic-navigation');
            var b = $('.layui-layer-tips');
            a && (a.attr("tg") ? (a.animate({
                left: 0,
                opacity: "show"
            }, 500), a.removeAttr("tg"), b.animate({
                left: 289,
                opacity: "show"
            }, 500)) : (a.animate({
                left: -200,
                opacity: "show"
            }, 500), a.attr("tg", "1"), b.animate({
                left: 89,
                opacity: "show"
            }, 500)));

            //分开写了
            a && (a.attr("tg") ? (
                localStorage.setItem('nav-status', 1)
            ) : (
                    localStorage.setItem('nav-status', 0)
                ));

        });


    })
</script>
{%endblock%}